<template>
    <div>
        <div class="header-sum-card">
            <Row :gutter="0" class="mt10">
                <Col class="mb10" :lg="24" :md="24" :sm="24" :xs="24">
                    <i-form ref="Blog" :model="Blog" :rules="ruleBlog" :label-width="60">
                        <Card>
                            <Row>
                                <i-col span="10">
                                    <Form-item label="类型" prop="flag">
                                        <i-select v-model="Blog.flag" placeholder="请选择类型">
                                            <i-option value="原创">原创</i-option>
                                            <i-option value="转载">转载</i-option>
                                            <i-option value="翻译">翻译</i-option>
                                        </i-select>
                                    </Form-item>
                                </i-col>
                                <i-col span="14">
                                    <Form-item label="标题" prop="title">
                                        <i-input v-model="Blog.title" placeholder="请输入标题"></i-input>
                                    </Form-item>
                                </i-col>
                            </Row>
                            <Row>
                                <Form-item label="简述" prop="description">

                                    <Input v-model="Blog.description" type="textarea"
                                           placeholder="Enter something..."/>
                                </Form-item>
                            </Row>
                        </Card>
                        <Card>
                            <!--                            //markdown编辑器-->
                            <Form-item prop="content" :label-width="0">
                                <div class="markdown">
                                    <div class="container">
                                        <mavon-editor v-model="Blog.content" ref="md" @imgAdd="$imgAdd"
                                                      @change="change"
                                                      style="min-height: 500px"/>
                                    </div>
                                </div>
                            </Form-item>
                            <Form-item label="首图地址" prop="firstImageUrl" :label-width="85">
                                <i-input v-model="Blog.firstImageUrl" placeholder="请输入标题"></i-input>
                            </Form-item>
                            <Row>
                                <i-col span="12">
                                    <Form-item label="分类" prop="type">
                                        <i-select v-model="Blog.type" placeholder="请选择博客分类" filterable
                                                  allow-create @on-create="addtype">
                                            <i-option v-for="item in typeList" :value="item.id">{{item.name}}
                                            </i-option>
                                        </i-select>
                                    </Form-item>
                                </i-col>
                                <i-col span="12">
                                    <Form-item label="标签" prop="tag">
                                        <i-select v-model="Blog.tag" placeholder="请选择博客标签" filterable
                                                  allow-create @on-create="addtag">
                                            <i-option v-for="item in tagList" :value="item.id">{{item.name}}
                                            </i-option>
                                        </i-select>
                                    </Form-item>
                                </i-col>
                            </Row>
                            <Form-item style="text-align: right">
                                <i-button type="primary" @click="handleSubmit('formValidate')">发布</i-button>
                                <i-button type="warning" style="margin-left:8px" @click="handleSave('formValidate')">
                                    保存
                                </i-button>
                                <i-button @click="handleReset('formValidate')" style="margin-left:8px">重置
                                </i-button>
                            </Form-item>
                        </Card>
                    </i-form>
                </Col>

            </Row>
        </div>
        <template>
            <div style="z-index: 2000;position: relative">
                <BackTop :height="100" :bottom="10">
                    <div style="background-color:#76A09D;border-radius: 50%">
                        <Icon type="md-arrow-round-up"/>
                    </div>
                </BackTop>
            </div>

        </template>
    </div>

</template>
<script>
    import {mavonEditor} from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'

    export default {
        //初始化markdown编辑器
        name: "",
        props: [],
        components: {
            mavonEditor,
        },
        data() {
            return {
                //markdown的获取到的内容
                content: '123',
                html: '123s',
                configs: {},
                //分类列表
                typeList: [],
                tagList: [],

                //博客表单数据
                Blog: {
                    id:null,
                    title: '',
                    flag: '',
                    // 文章概述
                    description: '',
                    //内容来源由markdown编辑器提供
                    content: '',
                    html: '',
                    firstImageUrl: 'https://picsum.photos/id/200/300/200',
                    published: Boolean,
                    tag: null,
                    type: null,
                },

                ruleBlog: {
                    title: [
                        {required: true, message: '标题不能为空', trigger: 'blur'}
                    ],
                    flag: [
                        {required: true, message: '请选择', trigger: 'change'}
                    ],
                    content: [
                        {required: true, message: '内容不能为空', trigger: 'blur'}
                    ],
                    description: [
                        {required: true, message: '简述不能为空', trigger: 'blur'}
                    ],

                    firstImageUrl: [
                        {required: true, message: '首图地址不能为空', trigger: 'blur'}
                    ],
                    tag: [
                        {required: true, type: 'number', message: '标签不能为空', trigger: 'blur'}
                    ],
                    type: [
                        {required: true, type: 'number', message: '分类不能为空', trigger: 'blur'}
                    ],

                }
            }
        },
        methods: {
            // 将图片上传到服务器，返回地址替换到md中
            $imgAdd(pos, $file) {
                let formdata = new FormData();

                this.$upload.post('/上传接口地址', formdata).then(res => {
                    console.log(res.data);
                    this.$refs.md.$img2Url(pos, res.data);
                }).catch(err => {
                    console.log(err)
                })
            },
            // 所有操作都会被解析重新渲染
            change(value, render) {
                // render 为 markdown 解析后的结果[html]
                this.html = render;
                //将实时获取到的html类型数据给blog对象
                this.Blog.html = this.html;
                this.Blog.content = value;
            },
            // 提交
            //请保持名称和form表单中的ref的名称一样，否则报错
            handleSubmit(Blog) {
                this.$refs.Blog.validate(async (valid) => {
                    if (valid) {
                        const a = {
                            id:this.Blog.id,
                            title: this.Blog.title,
                            flag: this.Blog.flag,
                            // 文章概述
                            description: this.Blog.description,
                            //内容来源由markdown编辑器提供
                            content: this.Blog.content,
                            html: this.Blog.html,
                            firstImageUrl: this.Blog.firstImageUrl,
                            tag: {
                                id: this.Blog.tag,
                                name: null,
                            },
                            type: {
                                id: this.Blog.type,
                                name: null
                            },
                            published: true,
                        }
                        const {data: result} = await this.$http.post("saveBlog", a)
                        if (result.code === 200) {
                            this.$Message.success(result.message);
                            this.$router.push('Blogs')
                        }else {
                            this.$Message.error(result.message);

                        }


                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            //保存数据
            handleSave(Blog) {
                this.$refs.Blog.validate(async (valid) => {
                    if (valid) {

                        const a = {
                            id:this.Blog.id,
                            title: this.Blog.title,
                            flag: this.Blog.flag,
                            // 文章概述
                            description: this.Blog.description,
                            //内容来源由markdown编辑器提供
                            content: this.Blog.content,
                            html: this.Blog.html,
                            firstImageUrl: this.Blog.firstImageUrl,
                            tag: {
                                id: this.Blog.tag,
                                name: null,
                            },
                            type: {
                                id: this.Blog.type,
                                name: null
                            },
                            published: false,
                        }
                        const {data: result} = await this.$http.post("saveBlog", a)
                        if (result.code === 200) {
                            this.$Message.success(result.message);
                            this.$router.push('Blogs')
                        }else {
                            this.$Message.error(result.message);

                        }

                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            // 重置
            handleReset(Blog) {
                this.Blog.content = '';
                this.$refs.Blog.resetFields();
            },
            //添加分类
            async addtype(type) {
                const {data: result} = await this.$http.post("saveType", {name: type,});
                this.Blog.type = result.data.id;
                this.getypelist();
            },
            async addtag(tag) {
                const {data: result} = await this.$http.post("saveTag", {name: tag,});
                this.Blog.tag = result.data.id;
                this.getaglist();
            },
            //打开页面获取标签选项
            async getaglist() {
                const {data: result} = await this.$http.get("getTagList/0/1000");
                this.tagList = result.data.content;
                this.$Message.success(result.message)
            },
            //打开页面获取分类选项
            async getypelist() {
                const {data: result} = await this.$http.get("getTypeList/0/1000");
                this.typeList = result.data.content;
                this.$Message.success(result.message)
            },
            //根据id获取博客信息
            async getBlogById(id) {
                const {data: result} = await this.$http.get("getBlogById/" + id)
                const a = {
                    id:result.data.id,
                    title: result.data.title,
                    flag: result.data.flag,
                    // 文章概述
                    description: result.data.description,
                    //内容来源由markdown编辑器提供
                    content: result.data.content,
                    firstImageUrl: result.data.firstImageUrl,
                    tag: result.data.tag.id,
                    type: result.data.type.id,
                }
                this.Blog = a;
            }
        },
        mounted() {
            this.getaglist();
            this.getypelist();
        },
        created() {
            if (this.$route.query.id != undefined) {
                this.getBlogById(this.$route.query.id)
            }
        }
    }
</script>
<style lang="less">
    .mt10 {
        margin-top: 10px;
    }

    .tc {
        text-align: center
    }

    .header-sum-card {
        font-family: 幼圆;

        span.num {
            font-size: 30px;
        }
    }

    .type-status-time {
        font-size: 16px;
        font-weight: bolder;
    }


    /*当呼出侧边导航栏时，使markdown处于底层*/
    .markdown {
        position: relative;
        /*解决当markdown全屏时无法显示的问题*/
        z-index: 100;
    }


</style>
